<script setup lang="ts">
import { sleep } from '@/utils/sleep'
import { useSound } from '@vueuse/sound'
import stepImg013 from '@/assets/common/12/step_02_3.jpg'
import stepImg016 from '@/assets/common/12/step_02_6.jpg'
import stepImg017 from '@/assets/common/12/step_02_7.jpg'
import stepImg018 from '@/assets/common/12/step_02_8.jpg'

import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const { play } = useSound(correctAnswerSfx)

const currentImg = ref(stepImg013)
const currentBarImg = ref(stepImg016)

const appStore = useAppStore()
const router = useRouter()

const intro = useIntro({
  steps: [

    {
      element: '#rotate2',
      intro: '请将旋转度数调整为-30°',
      position: 'top',
    },

  ],
}, [

])

const isShow = ref(false)
const imgShow = ref(false)
const isUnmounted = ref(false); // 控制是否打断跳转

let touchStartX = 0;
let isDragging = false
let dragStartX = 0
let dragStartY = 0
let dragdeltaX = 0
const handleDragStart = (event: MouseEvent) => {
  isDragging = true
  dragStartX = event.clientX
  dragStartY = event.clientY
  console.log(dragStartX);

}

const handleDragMove = (event: MouseEvent) => {


}

const handleDragEnd = (event: MouseEvent) => {
  console.log(event);

  isDragging = false
  dragdeltaX = event.clientX - dragStartX
  console.log(dragdeltaX);
  // 处理拖拽结束的逻辑
  if (dragdeltaX > 30) {
    // 当滑动距离大于30时，触发向左滑动事件
    handleCheck2();
  }
}

const handleTouchStart = (event: TouchEvent) => {
  touchStartX = event.touches[0].clientX;
}

const handleTouchMove = (event: TouchEvent) => {
  // 触摸移动逻辑
  handleDragMove(event.touches[0])
}

const handleTouchEnd = (event: TouchEvent) => {
  const touchEndX = event.changedTouches[0].clientX;
  const deltaX = touchEndX - touchStartX;

  if (deltaX > 30) {
    // 当滑动距离大于30时，触发向左滑动事件
    handleCheck2();
  }
}

const handleMouseDown = (event: MouseEvent) => {
  // 鼠标按下逻辑
  handleDragStart(event)
}

const handleMouseMove = (event: MouseEvent) => {
  // 鼠标移动逻辑
  handleDragMove(event)
}

const handleMouseUp = (event: MouseEvent) => {
  isDragging = false
  dragdeltaX = event.clientX - dragStartX
  console.log(dragdeltaX);
  // 处理拖拽结束的逻辑
  if (dragdeltaX > 30) {
    // 当滑动距离大于30时，触发向左滑动事件
    handleCheck2();
  }
}

const set1 = setTimeout(async () => {
  intro.start()
  await sleep(400)
  imgShow.value = true;
}, 0);

onBeforeUnmount(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask6_4 组件实例被卸载之前调用')
  clearTimeout(set1)
  imgShow.value = false;
})
onUnmounted(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask6_4 组件实例被卸载之前调用')
  clearTimeout(set1)
  imgShow.value = false;
})

async function handleCheck2() {
  play()
  intro.stop() // 暂停指导
  imgShow.value = false;
  currentImg.value = stepImg018
  currentBarImg.value = stepImg017
  await sleep(1000)
  isShow.value = true;
  await sleep(2000)
  setTimeout(() => {
    isShow.value = false;
    if (!isUnmounted.value) {
      router.push('Mask6_5')
    }
  }, 500)
}


</script>

<template>
  <div class="flex-1 flex flex-col ">
    <div class="no-click ">
      <div v-if="isShow">
        <div class="mask"></div>
        <!-- <div class="isShow"></div> -->
        <img class="isShow" src="../../assets/guide/success_4.png" alt="" srcset="">
      </div>
    </div>
    <div class="flex justify-between h-4em p-x-1em pt-1em ">
      <div>
        <i class="i-material-symbols-close mr-1em" />
        <i class="i-material-symbols-help-outline" />
      </div>

      <div>
        <n-button type="info" size="small" class="mr-1em">
          1080P<i class="i-material-symbols-arrow-drop-down-rounded" />
        </n-button>
        <n-button id="exportBtn" type="primary" size="small">
          导出
        </n-button>
      </div>
    </div>
    <div class="bg-#0A0A0A ">

      <img :src="currentImg" class="w-full" style="height: 90%;">
      <img :src="currentBarImg" style="position: absolute; bottom: 0;width: 100%;">
      <img class="imgShow" v-if="imgShow" src="../../assets/animation/right.gif">
      <div id="rotate2" class=" rotate2" draggable="true" @dragstart="handleDragStart" @dragmove="handleDragMove"
        @dragend="handleDragEnd" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
        @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" />
    </div>
  </div>
</template>
<style scoped lang="scss">
@media screen and (min-width:440px) {
  .rotate2 {
    position: absolute;
    width: 31px;
    height: 46px;
    top: 723px;
    left: 156px;
  }

  .imgShow {
    position: absolute;
    bottom: 60px;
    left: 175px;
    z-index: 99;
    height: 50px
  }

  .isShow {
    width: 310px;
    height: 108px;
    position: absolute;
    right: -10px;
    bottom: 95px;
    z-index: 999;
    // background: url("../../assets/guide/success_4.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: title, sans-serif;
    // font-size: 24px;
  }
  .mask {
    position: absolute;
    bottom: 75px;
    left: 138px;
    z-index: 99;
    height: 42px;
    width: 252px;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
  }
}

@media screen and (max-width:440px) {
  .rotate2 {
    position: absolute;
    width: 8vw;
    height: 12vw;
    bottom: 18vw;
    left: 39%;
  }

  .imgShow {
    position: fixed;
    bottom: 15vw;
    left: 44vw;
    z-index: 99;
    height: 50px;
  }
  .isShow {
    width: 310px;
    height: 108px;
    position: absolute;
    right: 2vw;
    bottom: 26vw;
    z-index: 999;
    // background: url("../../assets/guide/success_4.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: title, sans-serif;
    // font-size: 24px;
  }
  .mask {
    position: fixed;
    bottom: 18vw;
    left: 32vw;
    z-index: 99;
    height: 11vw;
    width: 65vw;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
  }
}

.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
</style>